<template>
  <view class="container">
	  <view class="contect_card">
	  	<view class="what_lang">
	  		<span>所求何事：</span>
	  	</view>
		<view class="time">
			<span>时间：</span>
		</view>
	  </view>
    <!-- 抽签按钮 -->
    <!-- <button class="draw-btn" @click="handleClickDraw">抽签</button> -->

    <!-- 摇一摇触发 -->
    <!-- <view class="shaking-area">
      <text>摇一摇手机来抽签</text>
    </view> -->

    <!-- 显示抽签结果 -->
   <!-- <view class="result">
      <text>{{ result }}</text>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      result: '',  // 抽签结果
      isShaking: false,  // 是否正在摇动
    };
  },
  mounted() {
    // 注册摇一摇事件
    this.setupShakeEvent();
  },
  methods: {
    // 点击抽签
    handleClickDraw() {
      this.getRandomDrawResult();
    },

    // 摇一摇触发
    setupShakeEvent() {
      uni.onAccelerometerChange((res) => {
        // 检测到摇动事件
        if (Math.abs(res.x) > 5 || Math.abs(res.y) > 5 || Math.abs(res.z) > 5) {
          if (!this.isShaking) {
            this.isShaking = true;
            this.getRandomDrawResult();
            setTimeout(() => {
              this.isShaking = false;
            }, 1000);  // 防止重复触发
          }
        }
      });
    },

    // 获取随机抽签结果
    getRandomDrawResult() {
      const results = ['一等奖', '二等奖', '三等奖', '参与奖', '谢谢参与'];
      const randomIndex = Math.floor(Math.random() * results.length);
      this.result = results[randomIndex];
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
  /* text-align: center; */
}

.contect_card{
	background-color: #fff;
	padding: 20rpx;
	border-radius: 20rpx;
}


.draw-btn {
  font-size: 20px;
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}

.shaking-area {
  margin-top: 20px;
  font-size: 18px;
  color: #555;
}

.result {
  margin-top: 30px;
  font-size: 24px;
  font-weight: bold;
  color: #f56c6c;
}
</style>
